<template>
  <view class="my-container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="card-bg">
        <image src="/static/my/bg-user.png" mode="aspectFill" class="bg-image"></image>
      </view>
      <view class="user-info">
        <view class="avatar-section">
          <image
              :src="userInfo.avatar || '/static/my/default-avatar.png'"
              class="user-avatar"
              @click="goLogin"
          ></image>
          <view class="user-meta">
            <text class="user-name" v-if="userInfo.nickname">{{ userInfo.nickname }}</text>
            <text class="login-tip" v-else @click="goLogin">立即登录</text>
            <text class="user-level" v-if="userInfo.level">VIP{{ userInfo.level }}会员</text>
          </view>
        </view>
        <view class="user-actions">
          <view class="action-item" @click="goToPage('vip')">
            <uni-icons type="vip-filled" size="24" color="#FFD700"></uni-icons>
            <text>会员中心</text>
          </view>
          <view class="action-item" @click="goToPage('setting')">
            <uni-icons type="gear-filled" size="24" color="#666"></uni-icons>
            <text>设置</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="order-section">
      <view class="section-header">
        <text class="section-title">我的订单</text>
        <text class="view-all" @click="goToPage('order')">查看全部 ></text>
      </view>

      <view class="order-status">
        <view class="status-item" v-for="status in orderStatus" :key="status.type" @click="goToOrder(status.type)">
          <uni-icons :type="status.icon" size="36" :color="status.color"></uni-icons>
          <text>{{ status.name }}</text>
          <uni-badge :text="status.count" size="small" absolute="rightTop" v-if="status.count > 0"></uni-badge>
        </view>
      </view>
    </view>

    <!-- 功能区 -->
    <view class="feature-section">
      <view class="feature-grid">
        <view class="feature-item" v-for="feature in features" :key="feature.name" @click="goToPage(feature.page)">
          <view class="feature-icon">
            <uni-icons :type="feature.icon" size="32" :color="feature.color"></uni-icons>
          </view>
          <text class="feature-name">{{ feature.name }}</text>
        </view>
      </view>
    </view>

    <!-- 推荐课程 -->
    <view class="course-section" v-if="purchasedCourses.length > 0">
      <view class="section-header">
        <text class="section-title">已购课程</text>
        <text class="view-all" @click="goToPage('buyCourse')">查看全部 ></text>
      </view>

      <scroll-view scroll-x class="course-scroll">
        <view class="course-list">
          <view
              class="course-item"
              v-for="course in purchasedCourses"
              :key="course.id"
              @click="goToCourseDetail(course.id)"
          >
            <image :src="course.cover" class="course-cover"></image>
            <text class="course-title">{{ course.title }}</text>
          </view>
        </view>
      </scroll-view>
    </view>


  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 用户信息
const userInfo = ref({
  avatar: '',
  nickname: '',
  level: 0
});

// 订单状态
const orderStatus = ref([
  { type: 'pendingPayment', name: '待付款', icon: 'wallet', color: '#FF6B6B', count: 2 },
  { type: 'pendingDelivery', name: '待发货', icon: 'gift', color: '#FF9D6C', count: 1 },
  { type: 'pendingReceipt', name: '待收货', icon: 'truck', color: '#5C6BC0', count: 3 },
  { type: 'pendingReview', name: '待评价', icon: 'compose', color: '#66BB6A', count: 0 },
  { type: 'refund', name: '退款/售后', icon: 'refresh', color: '#999', count: 0 }
]);

// 功能区
const features = ref([
  { name: '购物车', icon: 'cart', color: '#FF6B6B', page: 'cart' },
  { name: '收货地址', icon: 'location', color: '#5C6BC0', page: 'address' },
  { name: '优惠券', icon: 'ticket', color: '#FF9D6C', page: 'coupon' },
  { name: '客服中心', icon: 'headphones', color: '#66BB6A', page: 'service' },
  { name: '我的收藏', icon: 'star', color: '#FFD700', page: 'favorite' },
  { name: '浏览记录', icon: 'eye', color: '#999', page: 'history' },
  { name: '我的预约', icon: 'calendar', color: '#9C27B0', page: 'appointment' },
  { name: '帮助中心', icon: 'help', color: '#2196F3', page: 'help' }
]);

// 已购课程
const purchasedCourses = ref([
  { id: 1, title: '美睫基础入门课程', cover: '/static/course/course1.jpg' },
  { id: 2, title: '日式单根嫁接技术', cover: '/static/course/course2.jpg' },
  { id: 3, title: '开花睫毛进阶教程', cover: '/static/course/course3.jpg' }
]);

// 底部标签
const tabs = ref([
  { name: '首页', icon: 'home', page: 'index' },
  { name: '课程', icon: 'video', page: 'course' },
  { name: '购物车', icon: 'cart', page: 'cart' },
  { name: '我的', icon: 'person', page: 'my' }
]);

const currentTab = ref('my');

// 页面显示时检查登录状态
onShow(() => {
  checkLoginStatus();
});

// 检查登录状态
const checkLoginStatus = () => {
  const token = uni.getStorageSync('token');
  if (token) {
    // 已登录，获取用户信息
    getUserInfo();
  } else {
    // 未登录，清空用户信息
    userInfo.value = {
      avatar: '',
      nickname: '',
      level: 0
    };
  }
};

// 获取用户信息
const getUserInfo = () => {
  // 模拟API请求
  setTimeout(() => {
    userInfo.value = {
      avatar: '/static/my/avatar.jpg',
      nickname: '美睫爱好者',
      level: 3
    };
  }, 500);
};

// 跳转到登录页
const goLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};

// 跳转到订单页
const goToOrder = (type) => {
  uni.navigateTo({
    url: `/pages/order/order?type=${type}`
  });
};

// 跳转到页面
const goToPage = (page) => {
  if (page === 'cart') {
    uni.switchTab({
      url: '/pages/cart/cart'
    });
  } else if (page === 'buyCourse') {
    uni.navigateTo({
      url: '/pages/buyCourse/buyCourse'
    });
  } else if (page === 'address') {
    uni.navigateTo({
      url: '/pages/address/address'
    });
  } else if (page === 'order') {
    uni.navigateTo({
      url: '/pages/order/order'
    });
  }
  // 其他页面跳转...
};

// 跳转到课程详情
const goToCourseDetail = (id) => {
  uni.navigateTo({
    url: `/pages/course/detail?id=${id}`
  });
};
</script>

<style lang="scss" scoped>
.my-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

.user-card {
  position: relative;
  height: 320rpx;
  margin-bottom: 20rpx;

  .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .bg-image {
      width: 100%;
      height: 100%;
    }
  }

  .user-info {
    position: relative;
    z-index: 2;
    padding: 40rpx 30rpx;
    display: flex;
    flex-direction: column;
    height: 100%;

    .avatar-section {
      display: flex;
      align-items: center;
      flex: 1;

      .user-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 4rpx solid rgba(255, 255, 255, 0.5);
      }

      .user-meta {
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;

        .user-name {
          font-size: 36rpx;
          font-weight: bold;
          color: white;
          margin-bottom: 10rpx;
        }

        .login-tip {
          font-size: 36rpx;
          font-weight: bold;
          color: white;
        }

        .user-level {
          background: linear-gradient(90deg, #FFD700, #D4AF37);
          color: #333;
          padding: 6rpx 20rpx;
          border-radius: 30rpx;
          font-size: 24rpx;
          font-weight: 600;
          align-self: flex-start;
        }
      }
    }

    .user-actions {
      display: flex;
      justify-content: flex-end;
      gap: 30rpx;

      .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
        font-size: 24rpx;

        text {
          margin-top: 8rpx;
        }
      }
    }
  }
}

.order-section {
  background-color: white;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
    }

    .view-all {
      font-size: 26rpx;
      color: #999;
    }
  }

  .order-status {
    display: flex;
    justify-content: space-around;

    .status-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      text {
        font-size: 26rpx;
        margin-top: 15rpx;
      }
    }
  }
}

.feature-section {
  background-color: white;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40rpx 0;

    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .feature-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15rpx;
      }

      .feature-name {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}

.course-section {
  background-color: white;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
    }

    .view-all {
      font-size: 26rpx;
      color: #999;
    }
  }

  .course-scroll {
    white-space: nowrap;
    width: 100%;

    .course-list {
      display: inline-flex;
      gap: 20rpx;
    }

    .course-item {
      display: inline-flex;
      flex-direction: column;
      width: 200rpx;

      .course-cover {
        width: 200rpx;
        height: 120rpx;
        border-radius: 12rpx;
        margin-bottom: 15rpx;
      }

      .course-title {
        font-size: 26rpx;
        color: #333;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: white;
  padding: 10rpx 0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tab-text {
      font-size: 24rpx;
      margin-top: 6rpx;
      color: #666;

      &.active {
        color: #e54d42;
      }
    }
  }
}
</style>